/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

::slotted([slot="icon"]) {
    fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default)));
    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default)));
    grid-area: iconArea;
    align-self: start;
}

::slotted([slot="icon"]) {
    margin-inline-end: var(--mod-menu-item-label-text-to-visual, var(--spectrum-menu-item-label-text-to-visual));
}

:host {
    cursor: pointer;
    border-radius: var(--spectrum-menu-item-corner-radius);
    box-sizing: border-box;
    background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default)));
    line-height: var(--mod-menu-item-label-line-height, var(--spectrum-menu-item-label-line-height));
    min-block-size: var(--mod-menu-item-min-height, var(--spectrum-menu-item-min-height));
    padding-block-start: var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text));
    padding-block-end: var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text));
    padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
    margin: calc((var(--spectrum-menu-item-focus-indicator-offset) + var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-spacing-multiplier));
    grid-template:
        ". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . ." 1fr
        "selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"
        ". . . . descriptionArea . . ."
        ". . . . submenuArea . . ."
        / auto auto auto auto 1fr auto auto auto;
    align-items: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    display: grid;
    position: relative;
}

.spectrum-Menu-itemCheckbox {
    --mod-checkbox-top-to-text: 0;
    --mod-checkbox-text-to-control: 0;
    min-block-size: 0;
}

.spectrum-Menu-itemCheckbox .spectrum-Checkbox-box {
    margin-block-start: var(--mod-menu-item-top-to-checkbox, var(--spectrum-menu-item-top-to-checkbox));
    margin-block-end: 0;
    margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));
}

.spectrum-Menu-itemSwitch {
    min-block-size: 0;
}

.spectrum-Menu-itemSwitch .spectrum-Switch-switch {
    margin-block-start: var(--mod-menu-item-top-to-action, var(--spectrum-menu-item-top-to-action));
    margin-block-end: 0;
}

#label {
    grid-area: submenuItemLabelArea;
}

::slotted([slot="value"]) {
    grid-area: submenuItemValueArea;
}

:host([focused]),
:host(:focus) {
    background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-key-focus, var(--spectrum-menu-item-background-color-key-focus)));
    outline: none;
}

:host([focused]) > #label,
:host(:focus) > #label {
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-focus, var(--spectrum-menu-item-label-content-color-focus)));
}

:host([focused]) > [name="description"]::slotted(*),
:host(:focus) > [name="description"]::slotted(*) {
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-focus, var(--spectrum-menu-item-description-color-focus)));
}

:host([focused]) > ::slotted([slot="value"]),
:host(:focus) > ::slotted([slot="value"]) {
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus)));
}

:host([focused]) > .icon:not(.chevron, .checkmark),
:host(:focus) > .icon:not(.chevron, .checkmark) {
    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
}

:host([focused]) > .chevron,
:host(:focus) > .chevron {
    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
}

:host([focused]) > .checkmark,
:host(:focus) > .checkmark {
    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus)));
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus)));
}

:host(:is(:active, [active])) {
    background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-down, var(--spectrum-menu-item-background-color-down)));
}

:host(:is(:active, [active])) > #label {
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down)));
}

:host(:is(:active, [active])) > [name="description"]::slotted(*) {
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-down, var(--spectrum-menu-item-description-color-down)));
}

:host(:is(:active, [active])) > ::slotted([slot="value"]) {
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down)));
}

:host(:is(:active, [active])) > .icon:not(.chevron, .checkmark) {
    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
}

:host(:is(:active, [active])) > .chevron {
    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
}

:host(:is(:active, [active])) > .checkmark {
    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down)));
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down)));
}

:host([disabled]),
:host([aria-disabled="true"]) {
    background-color: initial;
}

:host([disabled]) #label,
:host([disabled]) ::slotted([slot="value"]),
:host([aria-disabled="true"]) #label,
:host([aria-disabled="true"]) ::slotted([slot="value"]) {
    color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
}

:host([disabled]) [name="description"]::slotted(*),
:host([aria-disabled="true"]) [name="description"]::slotted(*) {
    color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
}

:host([disabled]) ::slotted([slot="icon"]),
:host([aria-disabled="true"]) ::slotted([slot="icon"]) {
    color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
    fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
}

:host([focused]) .spectrum-Menu-back,
:host([focused]) {
    box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
    outline: var(--spectrum-menu-item-focus-indicator-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default);
    outline-offset: var(--spectrum-menu-item-focus-indicator-offset);
    border-radius: var(--spectrum-menu-item-corner-radius);
}

.spectrum-Menu-itemSelection {
    grid-area: selectedArea;
}

#label {
    --mod-switch-control-label-spacing: 0;
    --mod-switch-spacing-top-to-label: 0;
    font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-content-color-default, var(--spectrum-menu-item-label-content-color-default)));
    hyphens: auto;
    overflow-wrap: break-word;
    grid-area: labelArea;
}

::slotted([slot="value"]) {
    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-value-color-default, var(--spectrum-menu-item-value-color-default)));
    font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
    grid-area: valueArea;
    justify-self: end;
}

.spectrum-Menu-itemActions,
::slotted([slot="value"]) {
    align-self: start;
    margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
}

.spectrum-Menu-itemActions {
    grid-area: actionsArea;
}

[name="description"]::slotted(*) {
    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-description-color-default, var(--spectrum-menu-item-description-color-default)));
    font-size: var(--mod-menu-item-description-font-size, var(--spectrum-menu-item-description-font-size));
    hyphens: auto;
    overflow-wrap: break-word;
    line-height: var(--mod-menu-item-description-line-height, var(--spectrum-menu-item-description-line-height));
    grid-area: descriptionArea;
    margin-block-start: var(--mod-menu-item-label-to-description-spacing, var(--spectrum-menu-item-label-to-description-spacing));
}

:host([no-wrap]) #label {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.spectrum-Menu-item--collapsible.is-open {
    padding-block-end: 0;
}

.spectrum-Menu-item--collapsible.is-open .chevron {
    transform: rotate(90deg);
}

:host([focused]) .spectrum-Menu-item--collapsible.is-open,
:host(:is(:active, [active])) .spectrum-Menu-item--collapsible.is-open,
.spectrum-Menu-item--collapsible.is-open:focus {
    background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default)));
}

.spectrum-Menu-item--collapsible ::slotted([slot="icon"]) {
    grid-area: headingIconArea;
}

.spectrum-Menu-item--collapsible > ::slotted([slot="icon"]) {
    padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)));
    padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text)));
}

.spectrum-Menu-item--collapsible .chevron {
    grid-area: chevronAreaCollapsible;
}

:host([has-submenu]) .chevron {
    fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default)));
    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default)));
    grid-area: chevronAreaDrillIn;
    margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
    margin-inline-end: 0;
}

:host([has-submenu]) .is-open {
    --spectrum-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover)));
}

:host([has-submenu]) .is-open .icon:not(.chevron, .checkmark) {
    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
}

:host([has-submenu]) .is-open .chevron {
    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
}

:host([has-submenu]) .is-open .checkmark {
    fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
    color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
}

@media (hover: hover) {
    :host(:hover) {
        background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover)));
    }

    :host(:hover) > #label {
        color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-hover, var(--spectrum-menu-item-label-content-color-hover)));
    }

    :host(:hover) > [name="description"]::slotted(*) {
        color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-hover, var(--spectrum-menu-item-description-color-hover)));
    }

    :host(:hover) > ::slotted([slot="value"]) {
        color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover)));
    }

    :host(:hover) > .icon:not(.chevron, .checkmark) {
        fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
        color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
    }

    :host(:hover) > .chevron {
        fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
        color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
    }

    :host(:hover) > .checkmark {
        fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
        color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
    }

    :host([disabled]:hover),
    :host([aria-disabled="true"]:hover) {
        cursor: default;
        background-color: initial;
    }

    :host([disabled]:hover) #label,
    :host([disabled]:hover) ::slotted([slot="value"]),
    :host([aria-disabled="true"]:hover) #label,
    :host([aria-disabled="true"]:hover) ::slotted([slot="value"]) {
        color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
    }

    :host([disabled]:hover) [name="description"]::slotted(*),
    :host([aria-disabled="true"]:hover) [name="description"]::slotted(*) {
        color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
    }

    :host([disabled]:hover) ::slotted([slot="icon"]),
    :host([aria-disabled="true"]:hover) ::slotted([slot="icon"]) {
        color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
        fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
    }

    .spectrum-Menu-item--collapsible.is-open:hover {
        background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default)));
    }

    :host([has-submenu]:hover) .chevron {
        fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
        color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
    }
}

:host([has-submenu][focused]) .chevron,
:host([has-submenu]:focus) .chevron {
    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus)));
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus)));
}

:host([has-submenu]:is(:active, [active])) .chevron {
    fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down)));
    color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down)));
}

.spectrum-Menu-back {
    padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content));
    padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0);
    flex-flow: wrap;
    align-items: center;
    display: flex;
}

.spectrum-Menu-backButton {
    cursor: pointer;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    display: inline-flex;
}

:host([focused]) .spectrum-Menu-backButton {
    outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);
    outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1);
}

.spectrum-Menu-backHeading {
    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color)));
    font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size));
    font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight));
    line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height));
    display: block;
}
